﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>树形联动</title>

    <link href="../demo.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }    
    </style>  
    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    <!--引入皮肤样式-->
    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />

</head>
<body>
   
    
<div class="mini-splitter" style="width:100%;height:100%;">
    <div size="240" showCollapseButton="true">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">                
            <span style="padding-left:5px;">名称：</span>
            <input class="mini-textbox" />
            <a class="mini-button" iconCls="icon-search" plain="true">查找</a>                  
        </div>
        <div class="mini-fit">
            <ul id="tree1" class="mini-tree" url="../data/deptTree.txt" style="width:100%;"
                showTreeIcon="true" textField="name" idField="id" parentField="pid" resultAsTree="false"
                
            >        
            </ul>
        </div>
    </div>
    <div showCollapseButton="true">
        <div class="mini-toolbar" style="padding:2px;border-top:0;border-left:0;border-right:0;">                
            
            <a class="mini-button" iconCls="icon-add" plain="true" onclick="addRow()">新增</a>
            <a class="mini-button" iconCls="icon-remove" plain="true" onclick="removeRow()">删除</a>     
            <span class="separator"></span>             
            <a class="mini-button" iconCls="icon-save" plain="true" onclick="saveData()">保存</a>                  
        </div>
        <div class="mini-fit" >
            <div id="grid1" class="mini-datagrid" style="width:100%;height:100%;" 
                borderStyle="border:0;"
                url="../data/AjaxService.jsp?method=GetDepartmentEmployees"
                showFilterRow="true" allowCellSelect="true" allowCellEdit="true"                
            >
                <div property="columns">            
                    <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
                        <input property="editor" class="mini-textbox" style="width:100%;"/>
                    </div>      
                    <div field="name" width="120" headerAlign="center" allowSort="true">员工姓名                        
                        <input property="editor" class="mini-textbox" style="width:100%;"/>
                        <input id="nameFilter" property="filter" class="mini-textbox" onvaluechanged="onNameFilterChanged" style="width:100%;" />
                    </div>                
                    <div field="gender" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">性别
                        <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>
                    </div>            
                    <div field="age" width="100" allowSort="true">年龄
                        <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
                    </div>
                    <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                        <input property="editor" class="mini-datepicker" style="width:100%;"/>
                    </div>                                    
                    <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
                </div>
            </div>  
        </div>
    </div>        
</div>
    
    <script type="text/javascript">
        mini.parse();

        var tree = mini.get("tree1");
        var grid = mini.get("grid1");

        tree.on("nodeselect", function (e) {
        
            if (e.isLeaf) {
                grid.load({ dept_id: e.node.id });
            } else {
                grid.setData([]);
                grid.setTotalCount(0);
            }
        });
        //////////////////////////////////////////////
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
        function onNameFilterChanged(e) {
            var textbox = e.sender;
            var key = textbox.getValue();
            
            var node = tree.getSelectedNode();
            if (node) {
                grid.load({ dept_id: node.id, key: key });
            }
        }
        function addRow() {            
            var node = tree.getSelectedNode();
            if (node) {
                var newRow = { name: "New Row" };
                newRow.dept_id = node.id;
                grid.addRow(newRow, 0);
            }
        }
        function removeRow() {
            var rows = grid.getSelecteds();
            if (rows.length > 0) {
                grid.removeRows(rows, true);
            }
        }
        function saveData() {
            var data = grid.getChanges();
            var json = mini.encode(data);
            grid.loading("保存中，请稍后......");
            $.ajax({
                url: "../data/AjaxService.jsp?method=SaveEmployees",
                data: { data: json },
                type: "post",
                success: function (text) {
                    grid.reload();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });
        }
    </script>

</body>
</html>